<template>
    <div class="main">
      <template>
        <el-table
          :data="teams"
          style="width: 100%"
          :row-class-name="tableRowClassName">
          <el-table-column
            label="队徽"
            width="180"
            >
            <template slot-scope="scope">
              <img :src="getImgUrl(scope.row.pic)" style="width: 30px;height: 30px;"/>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="球队名称"
            width="180">
          </el-table-column>
          <el-table-column
            label="成立時間"
            width="280">
              <span>1989-01-01</span>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEditTeam(scope.$index, scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDeleteTeam(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--弹框-->
        <el-button size="mini"
                   @click="handleAddTeam">新增</el-button>
        <addTeam v-if="addDialogIsShow" ref="showAddTeam"></addTeam>
        <editTeam v-if="editDialogIsShow" ref="showEditTeam"></editTeam>
      </template>
    </div>
</template>

<script>
  import api from "../../../../axios/api"
  import addTeam from '@/components/back/team/addTeam.vue'
  import editTeam from '@/components/back/team/editTeam.vue'
    export default {
        name: "index",
      components : {
        addTeam,
        editTeam
      },
      data(){
        return {teams:[],
          addDialogIsShow: false,
          editDialogIsShow:false}
      },
      methods:{
        getImgUrl:function(imgsrc){
          return  "../../../static/images/league/"+imgsrc;
        },
        tableRowClassName({row, rowIndex}) {
          if (rowIndex % 2==0) {
            return 'warning-row';
          } else {
            return '';
          }
          return '';
        },
      setDataFromAxios:function(){
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios("/league",null,"post")
          .then(res=>{this.teams = res.leagues[0].teams});//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      },
        handleAddTeam:function() {
          let _this = this;
          _this.addDialogIsShow = true;
          _this.$nextTick(() => {
            _this.$refs.showAddTeam.init();
          })
        },
        handleEditTeam:function(index,team) {
          let _this = this;
          _this.editDialogIsShow = true;
          _this.$nextTick(() => {
            _this.$refs.showEditTeam.init(team);
          })
        }
    },
    //vue init方法 当前页面初始化就自动执行的方法 一般用于页面初始化就读取数据
    created:function () {
      this.setDataFromAxios();//1.创建页面的时候 调用自定义的数据请求方法  而数据请求方法把得到数据赋值给了当前页面的变量
    }
    }
</script>

<style scoped lang="stylus">
.main
  width 1000px
  margin 0 auto
/deep/ .warning-row  /*不写deep渲染出错*/
  background-color oldlace
/deep/ .success-row
  background-color #f0f9eb

</style>
